<template>
  <a-select v-model:value="trainCode" show-search allowClear
            :filterOption="filterTrainCodeOption" @change = "onChange" placeholder="请选择车次"
            :style=" 'width: ' + localWidth ">
    <a-select-option
        v-for="item in trains"
        :key="item.code"
        :value="item.code"
        :label="item.code + item.start + item.end">
      {{item.code}} | {{item.start}} ~ {{item.end}}
    </a-select-option>
  </a-select>
</template>
<script>

import {defineComponent, onMounted, ref, watch} from "vue";
import axios from "axios";
import {notification} from "ant-design-vue";
export default defineComponent({
  name: "train-select-view",
  props: ["modelValue","width"],
  emits: ['update:modelValue', 'change'],
  setup(props , {emit}) {
    const trainCode = ref([]);

    //车次下拉框
    const trains = ref();

    const localWidth = ref(props.width);
    if(Tool.isEmpty(props.width)){
      localWidth.value = "100%";
    }

    // 利用watch，动态获取父组件的值，如果放在onMounted或其它方法里，则只有第一次有效
    watch(() => props.modelValue, ()=>{
      console.log("props.modelValue", props.modelValue);
      trainCode.value = props.modelValue;
    }, {immediate: true});


    //查询所有车次
    const queryTrainCode = () => {
      axios.get("/business/train/query-all").then( (res)=> {
        let data =res.data;
        if (data.success){
          console.log(data.content);
          trains.value = data.content;
        }else{
          notification.error({description: data.message});
        }
      });
    };
    //车站下拉框
    const filterTrainCodeOption = (input, option) =>{
      console.log(input, option);
      return option.label.toLowerCase().indexOf(input.toLowerCase()) >=0;
    };

    /**
     * 将当前组件的值响应给父组件
     * @param value
     */
    const onChange = (value) => {
      emit('update:modelValue', value);
      let train = trains.value.filter(item => item.code === value)[0];
      if (Tool.isEmpty(train)) {
        train = {};
      }
      emit('change', train);
    };

    onMounted( () => {
      queryTrainCode();
    })

    return{
      trainCode,
      trains,
      filterTrainCodeOption,
      onChange,
      localWidth
    }
  },
});
</script>